<% extends "common/msui.html" %>
<% block title %>购物车<% endblock %>
<% block body %>
<% set line_ids = _pool['shopping.cart.line'].search([('order_id', '=', cart_id), ('state', '=', 'draft')]) %>
<% set cart_line = _pool['shopping.cart.line'].get_cart_line_info(line_ids) %>
<div class="page" id="page-cart" ms-controller='carts'>
  <header class="bar bar-nav">
    <a class='button button-link button-nav pull-right' style='margin-right:5px' ms-visible='editable' ms-click='editable_done'><span>完成</span></a>
    <a class='button button-link button-nav pull-right' style='margin-right:5px' ms-visible='!editable' ms-click='enter_editable'><span>编辑</span></a>
    <a class='button button-link button-nav pull-left' style='margin-left:5px' ms-visible='editable' ms-click='editable_give_up'><span>放弃</span></a>
    <!-- <a class='button button-fill button-success pull-right' ms-visible='!editable' ms-click='enter_editable'><span>编辑</span></a> -->
    <a class="button button-link button-nav pull-left back" href='/mshop/products' ms-visible='!editable'>
      <span class="icon icon-left"></span>
      返回
    </a>
    <h1 class="title">购物车</h1>
  </header>
  <div class="content">
    <div >
      <div class="list-block cards-list" style='margin-bottom:100px;margin-top:0px'>
        <ul>
          <li ms-repeat='cart_line' class='card' ms-visible="el.state == 'draft'" >
            <div class='card-header wrap-hidden'>{{el.product_name}}</div>
            <div class="item-content" style='padding-left:0px;'>

              <div class='col-5' style='margin-left:5px;margin-right:10px' ms-click='choose_line($event, el)' >
                <div class='circle-choose' ms-class='circle-choosed:el.choose'></div>
              </div>

              <div class='item-media'><img ms-attr-src='/website/image/product.product/{{el.product_id}}/image' width='60rem' height='40rem' /></div>
              <div class='item-inner' style='display:inline-block' ms-active='cart-line-active'>
                <div class='row'>
                  <div class='inner-left-content col-95' style='margin-left:0px'>
                    <ul style='padding-left:0.5rem;'>
                      <li><span>{{el.name}} </span></li>
                      <li>
                        <span>{{el.price_unit}} ¥</span>
                        <div ms-if='el.product_group' style='display:inline'><span>({{el.reserve_quantity}}</span> / <span style='color:red'>{{el.minimum_quantity}})</span></div>
                      </li>
                      <li>
                        <div class='control-qty'>
                          <span ms-click='mins_qty(el, el.product_uom_qty)' class='mshop-minus-qty' ms-class='mshop-minus-qty-disable:el.product_uom_qty <= 1'>-</span><input ms-attr-readonly='!editable' class='mshop-qty' ms-duplex='el.product_uom_qty' type='text' autocomplete='off' /><span ms-click='plus_qty(el)' class='mshop-plus-qty'>+</span>
                        </div>
                      </li>
                    </ul>
                  </div>

                  <div class='col-20 editable-delete-right' ms-visible='editable' ms-click='delete_line(el)'>
                    <p>删除</p>
                  </div>

                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class='card mshop-tab-card mshop-releative-top'>
        <div class='card-content'>
          <div class='card-content-inner' style='padding-top:0px;padding-bottom:0px'>
            <div class='row'>
              <div class='col-5' style='margin-left:15px;margin-top:4px;padding-top:15px;padding-bottom:15px' ms-click='all_choose_line()'>
                <div class='circle-choose' ms-class='circle-choosed:all_choose'></div>
              </div>

              <div class='col-10' style='padding-top:15px;padding-bottom:15px' ><span style='white-space:nowrap'>全选</span></div>

              <div class='col-20 pull-right mshop-clearing' ms-click='clearing_cart' ms-class='mshop-clearing-disable:disable_clearing'><span>结算</span></div>
              <div class='col-20 pull-right' style='padding-top:15px;padding-bottom:15px'><span style='white-space:nowrap;float:right'>合计: {{amount}} ¥</span></div>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <footer>
    <nav class="bar bar-tab index-footer">
      <a class="tab-item" href="/mshop?tab=index">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
      </a>
      <a class="tab-item" href="/mshop?tab=cart">
        <span class="icon icon-cart"></span>
        <span class="tab-label">购物车</span>
      </a>
      <a class="tab-item" href="/mshop?tab=my">
        <span class="icon icon-me"></span>
        <span class="tab-label">我的</span>
      </a>
    </nav>
  </footer>

  <script type="application/javascript">
  $(function(){
      var cart_line = ${cart_line|tojson|safe}

      cart_line.forEach(function(line) {
        line.name = line.name.substr(0, 50) + '...';
        line.choose = false;
      });

      var update_cart_line = function(line_id, qty) {
        $.ajax({
          url: '/mshop/shopping_cart/update_cart',
          data: {
            line_id: line_id,
            qty: qty,
          },
          async: true,
        });
      };

      var synchronize_cart_line = function(cart_line) {
        var change_line = {}
        cart_vm.cart_line.forEach(function(line) {
          change_line[line.id] = {
            state: line.state,
            product_uom_qty: line.product_uom_qty,
        }});

        $.ajax({
          url: '/mshop/shopping_cart/update_cart',
          data: {
            cart_line: JSON.stringify(change_line),
          },
          type: 'post',
          async: true,
        });

      };

      var cart_vm = avalon.define({
        $id: 'carts',
        editable: false,
        disable_clearing: true,
        all_choose: false,
        cart_line: cart_line,

        amount: 0,
        backup_cart_line: [],
        update_amount: function() {
          cart_vm.amount = 0;
          cart_vm.cart_line.forEach(function(line) {
            if (line.choose && line.state == 'draft') {
              cart_vm.amount += line.product_uom_qty * line.price_unit
            }
          });
        },
        mins_qty: function(line, qty) {
          if (parseInt(line.product_uom_qty) > 1) {
            line.product_uom_qty = parseInt(line.product_uom_qty) - 1;
            update_cart_line(line.id, line.product_uom_qty);
            cart_vm.update_amount();
          }
        },

        plus_qty: function(line) {
          line.product_uom_qty = parseInt(line.product_uom_qty) + 1;
          update_cart_line(line.id, line.product_uom_qty);
          cart_vm.update_amount();
        },

        enter_editable: function() {
          cart_vm.editable = true;
          // cart_vm.backup_cart_line = cart_vm.cart_line;
          // 将进入编辑状态前每行的数量和状态记录下来
          cart_vm.backup_cart_line = []
          $.each(cart_vm.cart_line, function(index) {
            cart_vm.backup_cart_line.push({
              index: index,
              state: cart_vm.cart_line[index].state,
              product_uom_qty: cart_vm.cart_line[index].product_uom_qty,
            });
          });

          $('.inner-left-content').addClass('col-80');
        },

        editable_give_up: function() {
          cart_vm.editable = false;

          cart_vm.backup_cart_line.forEach(function(line) {
            $.extend(true, cart_vm.cart_line[line.index], line)
          });
        },

        editable_done: function() {
          cart_vm.editable = false;
          synchronize_cart_line(cart_vm.cart_line);
          $('.inner-left-content').removeClass('col-80');
        },

        delete_line: function(line) {
          line.state = 'delete';
        },

        choose_line: function(event, line) {
          line.choose = !line.choose;

          cart_vm.all_choose = true;
          cart_vm.disable_clearing = true;

          cart_vm.cart_line.forEach(function(line) {
            if (!line.choose) {
              cart_vm.all_choose = false;
            } else {
              cart_vm.disable_clearing = false;
            }
          });

          cart_vm.update_amount();
        },

        all_choose_line: function() {
          cart_vm.all_choose = !cart_vm.all_choose;
          cart_vm.disable_clearing = !cart_vm.all_choose;

          cart_vm.cart_line.forEach(function(line) {
            line.choose = cart_vm.all_choose;
          });

          cart_vm.update_amount();
        },

        clearing_cart: function() {
          if (cart_vm.disable_clearing) {
            return;
          }

          var line_ids = [];
          try {
            cart_vm.cart_line.forEach(function(line){
              if (line.choose && line.state == 'draft') {
                  if (line.product_group && line.reserve_quantity < line.minimum_quantity) {
                    $.alert('抱歉，' + line.product_name + '的预订数量还没有达到起订数量');
                    throw {'name': 'error'};
                  };
                line_ids.push(line.id);
              }
            });
          } catch(e) {
            return;
          }

          $.ajax({
            url: '/mshop/shopping_cart/clearing',
            data: {
              line: JSON.stringify(line_ids),
            },
            type: 'post',
            success: function(e) {
              $.router.loadPage('/mshop/order?order_id=' + e);
            },
            async: true,
          });
        }

      });

      avalon.scan();
      $.hideIndicator();
  });

  </script>
  <% endblock %>
</div>